import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 挂载路由
const routes = [
  // 配置登录页面的路由表
  {
    // 路径以/ 开头
    path: "/login",
    // 路径的别名
    name: "login",
    // 这种属于：动态按需导入
    // @ 是根目录 src 的路径别名
    component: () => import("@/views/login"),
  },
  {
    path: "/",
    // name: "layout",
    component: () => import("@/views/layout"),
    children: [
      {
        path: "", //默认子路由，只能有一个，当访问/ 的时候，显示home组件
        name: "home",
        component: () => import("@/views/home"),
      },
      {
        path: "/qa",
        name: "qa",
        component: () => import("@/views/qa"),
      },
      {
        path: "/video",
        name: "video",
        component: () => import("@/views/video"),
      },
      {
        path: "/my",
        name: "my",
        component: () => import("@/views/my"),
      },
    ],
  },
  // 添加搜索的路由
  {
    path: "/search",
    name: "search",
    component: () => import("@/views/search"),
  },
  // 配置文章详情页面路由组件
  {
    path: "/article/:articleId", // 需要传递文章id
    name: "article",
    component: () => import("@/views/article"),
    // 开启 props 传参，说白了就是把路由参数映射到组件的 props 数据中
    props: true,
  },
  // 配置编辑资料的路由
  {
    path: "/user/profile",
    name: "user-profile",
    component: () => import("@/views/user-profile"),
  },
];

const router = new VueRouter({
  routes,
});

export default router;
